<template>
  <view class="myPage">
    <my-title :title="'酒店-民宿'" @myBack="back"></my-title> 
    <view class="search">  
      <uni-search-bar @confirm="search" placeholder="请输入您想要的内容"></uni-search-bar>
    </view>
    <view class="titles"> 
      <block v-for="(item,i) in titles" :key="i">
        <view  :class="index == i?'special':'item'" @click="changeIndex(i)">
          <text>{{item}}</text>
        </view>
      </block>
    </view>
    <view class="hotals">
      <block v-for="(item,i) in hotals" :key="i">
        <view class="item">
          <my-hotal :hotal="item" @toHotalDetal="toHotalDetal(i)"></my-hotal>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return { 
        step: false,
        index:'0',
        titles:['酒店','民宿','顶层公寓','别墅','钟点房'],
        hotals: [
          {
            id:0,
            img: 'https://img95.699pic.com/photo/50036/0196.jpg_wh860.jpg%21/fw/562',
            text:'华妍校园民宿',
            num: 5
          },
          {
            id: 1,
            img: 'https://img1.baidu.com/it/u=4278519391,4121523621&fm=253&fmt=auto&app=138&f=PNG',
            text:'花果山水帘洞',
            num: 4
          },
          {
            id:2,
            img: 'https://img2.baidu.com/it/u=109831605,600137214&fm=253&fmt=auto&app=138&f=JPEG',
            text:'花城仙悦府',
            num: 3
          }
        ]
      };
    },
    
    methods: {
      changeIndex(i) {
        this.index = i
      },
      back() {
        console.log('hotal的自定义事件调用了')
        uni.redirectTo({
          url:'/subpkg/detail/detail?data='+this.index
        })
       
      },
      toHotalDetal(index) {
        this.step = true
        console.log('hotal')
        uni.redirectTo({
          url:'/subpkg/hotalDetail/hotalDetail?data='+index
        })
      }
    }
  }
</script>

<style lang="scss">
page {
  background-color: #efefef;
}
.myPage {
  padding: 0 20px;
  .search {
    border-radius: 20px;
  }
  .titles {
    display: flex;
    justify-content: space-around; 
    align-items: center;
    height: 50px;
    font-size: 14px;
    .item {
      padding: 5px;
      text-align: center;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 10px;
    }
    .special {
      padding: 5px;
      background-color: white;
      border: 1px solid #1296db;
      border-radius: 10px;
    }
  }
  .hotals {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .item {
      margin-bottom: 40rpx;
      // border: 1px solid black;
    }
  }
}
</style>
